<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>喜欢多云的季节i</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

    <script type="text/javascript" src="js/playview.js"></script>
    <style type="text/css">


        body {
            background-color: rgb(242,242,242);
        }
        .imgBox{
            width: 1200px;
            height: 340px;
            margin: 0 auto;

        }

        .imgBox img{
            width: 1200px;
            height: 340px;
            margin: 0 auto;
            padding-top: 0px;

        }

        .img1{
            display: block;
        }

        .img2{
            display: none;
        }

        .img3{
            display: none;
        }
        .mydiv {
            margin: 0 auto;
        }
        .mydiv .mylink {
            height: 30px;
            font-size: 17px;
            margin-top: 20px;
            vertical-align: center;
            display: block;
            float: left;
            margin-left: 70px;
            color: black;
        }
        .mydiv {
            display: block;
            float: left;
        }
        .mylink{
            background-color: #63B504;
            font-size: 20px;
            display: block;
            width: 200px;
            height: 65px;
            color: black;
        }
        .gradient-text-one{
            background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
        }
    </style>
</head>
<body>
<div  style="width: 1600px;height: 1200px" >
    <div style="width: 900px;height: 600px;background-color: rgb(255,255,255);float: left">
        <br>
        <p th:text="${describes}" style="text-align: center;font-size: 15px" class="gradient-text-one"></p>
        <img th:src="${location}" style="width: 900px;height: 550px">
    </div>
    <div style="float: left;width: 80px;height: 350px">

    </div>
    <div style="width: 250px ;height: 400px;float: left;background-color: rgb(255,255,255)">
        <a class="mylink" style="text-align: center;padding-top: 20px;width: 250px;" th:href="@{${location}}" th:if="${not #strings.isEmpty(session.visitor)&& session.visitor.getReward() gt 0}" onclick="Toast1()" th:download="${id} ">下载图片</a>
        <p th:text="'图片类型: '+${mytype}" style="font-size: 15px"></p>
        <p th:text="'图片ID: '+${id}" style="font-size: 15px" id="id"></p>
        <p th:text="'名称: '+${myname}" style="font-size: 15px"></p>
        <p th:text="'上传时间: '+${createTime}" style="font-size: 15px"></p>
        <p th:text="'浏览量: '+${pageview}" style="font-size: 15px"></p>
        <p> <a class="gradient-text-one" style="padding-left: 65px;font-size: 30px" th:href="@{/toaddCollect(image=${location})}"  th:if="${not #strings.isEmpty(session.visitor)}" onclick="Toast()">收藏</a></p>
        <p><a class="gradient-text-one" style="padding-left: 65px;font-size: 30px" th:href="@{/scenery/deleteSceneryss(mytype=${mytype},id=${id})}"  th:if="${not #strings.isEmpty(session.visitor)&&session.visitor.role eq 'admin'}" onclick="Toast2()">删除</a></p>
        <a class="gradient-text-one" style="padding-left: 65px;font-size: 30px" th:href="@{/admin/passUserScenery(mytype=${mytype},id=${id},location=${location},myname=${myname},describes=${describes},createtime=${createtime},pageview=0)}"  th:if="${not #strings.isEmpty(session.visitor)&&session.visitor.role eq 'admin'}" onclick="Toast3()">审批</a>
    </div>
    <br>
    <div style="width: 900px;float: left" th:if="${not #strings.isEmpty(session.visitor)}">
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="submit" style="background-color: #9d9d9d" id="send77">发布</button>
      </span>
                        <input type="text" class="form-control" placeholder="评价" name="evaluate" id="evaluate">
                        <input type="hidden" class="form-control" placeholder="图片id" name="id"  th:value="${id}" id="myid">
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
    </div>
    <div id="mycontent77">

    </div>
</div>
<script>
    function submit6() {
        var myid=$("#myid").val();
        var evaluate=$("#evaluate").val();
        console.log(myid);
        console.log(evaluate)
        $.ajax({
            type: "POST",
            url: "http://localhost:8081/view/updateEvaluate2",
            data: {evaluate: evaluate,id: myid,},
            success: function(result) {
                console.log(result)
                var con=''
                for (var j=0;j<result.length;j++){
                    con+="<p style='width: 400px'>"+result[j]+"</p>"
                    /* con+=" <p  style=\"font-size: 15px;font-family: Arial\">\n" +result[j]+
                        "</p>"*/
                    console.log(con)
                }
                $("#mycontent77").html(con)
                $("#evaluate").val("")
            },
            dataType: "json"
        });
    }
    $("#send77").click(function (){
        submit6()
    })
    submit6();
    function fun66(){
        var myid=$("#myid").val();
        $.ajax({
            type: "POST",
            url: "http://localhost:8081/scenery/updateDownLoad",
            data: {id: myid},
            success: function(result) {
                console.log(myid)
            },
            dataType: "json"
        });
    }
    function Toast(msg,duration){
        duration=isNaN(duration)?3000:duration;
        var m = document.createElement('div');
        m.innerHTML = "收藏成功";
        m.style.cssText="width: 18%;min-width: 150px;opacity: 0.7;height: 30px;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 5px;position: fixed;top: 22%;left: 82%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";
        document.body.appendChild(m);
        setTimeout(function() {
            var d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function() { document.body.removeChild(m) }, d * 1000);
        }, duration);
    }
    function Toast1(msg,duration){
        duration=isNaN(duration)?3000:duration;
        var m = document.createElement('div');
        m.innerHTML = "下载成功";
        m.style.cssText="width: 18%;min-width: 150px;opacity: 0.7;height: 30px;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 5px;position: fixed;top: 22%;left: 82%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";
        document.body.appendChild(m);
        setTimeout(function() {
            var d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function() { document.body.removeChild(m) }, d * 1000);
        }, duration);
        $.ajax({
            type: "POST",
            url: "http://localhost:8081/user/reward1",
            data: {},
            success: function(result) {
                console.log(result)
            },
            dataType: "json"
        });
        fun66()

    }
    function Toast2(msg,duration){
        duration=isNaN(duration)?3000:duration;
        var m = document.createElement('div');
        m.innerHTML = "删除成功";
        m.style.cssText="width: 18%;min-width: 150px;opacity: 0.7;height: 30px;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 5px;position: fixed;top: 22%;left: 82%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";
        document.body.appendChild(m);
        setTimeout(function() {
            var d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function() { document.body.removeChild(m) }, d * 1000);
        }, duration);
    }
    function Toast3(msg,duration){
        duration=isNaN(duration)?3000:duration;
        var m = document.createElement('div');
        m.innerHTML = "审批成功";
        m.style.cssText="width: 18%;min-width: 150px;opacity: 0.7;height: 30px;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 5px;position: fixed;top: 22%;left: 82%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";
        document.body.appendChild(m);
        setTimeout(function() {
            var d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function() { document.body.removeChild(m) }, d * 1000);
        }, duration);
    }

</script>
</body>
</html>